<template>
    <!-- 专题页 -->
    <div id="special_container">
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
        <banner v-if="specialInfo.specialDetail && !isEmptyObject(specialInfo.specialDetail.headImg)">
            <img class="banner-component-img" slot="banner-image"
                 v-lazy="specialInfo.specialDetail.headImg + '?cmd=imageprocess/processtype/2/quality/100/width/700'"/>
        </banner>
        <div id="wrapper">
            <div v-if="!isEmptyObject(specialInfo)">
                <div class="special-title">{{specialInfo.specialDetail.specialName}}</div>
                <div class="special-content">{{specialInfo.specialDetail.specialDesc}}</div>
                <ul class="special-tag-list">
                    <li class="special-tag-item" v-for="(item,index) in specialInfo.rows" v-if="item.columnName"
                        @click.prevent="custormAnchor(item.columnName)">
                        {{item.columnName}}
                    </li>
                    <div class="clearBoth"></div>
                </ul>
                <div class="greyChannel"></div>

                <ul class="special-art-list">
                    <li class="special-art-item" v-for="(row,index) in specialInfo.rows">
                        <!-- 栏目的标题栏 -->
                        <div class="special-art-item-title" v-show="row.columnId" :id="row.columnName">
                            <span class="special-art-item-title-dot">○</span>&nbsp;{{row.columnName}}
                        </div>

                        <!-- 对不同类型的主题呈现不同的样式 -->
                        <div :class="{'special-art-item-list-double':row.columnStyle!=1}">
                            <div v-for="(content,index) in row.contents"
                                 :class='{
                                "special-content-container": row.columnStyle==1,
                                "special-content-container-small": row.columnStyle!=1
                             }'>

                                <listlive v-if="content.type==2" :info="content"></listlive>
                                <listinfo v-if="content.type==3||content.type==22||content.type==23"
                                          :info="content"></listinfo>
                                <listalbum v-if="content.type==4" :info="content"></listalbum>
                                <listvideo v-if="content.type==5" :info="content"></listvideo>
                                <listnote v-if="content.type==11" :info="content"></listnote>
                                <listspecial v-if="content.type==12" :info="content"></listspecial>
                                <listshow v-if="content.type==13" :info="content"></listshow>
                                <listlink v-if="content.type==15" :info="content"></listlink>
                                <Listgoods v-if="content.type==16" :info="content"></Listgoods>
                                <Listaudio v-if="content.type==24" :info="content"></Listaudio>
                                <div :class='{"clearBoth":row.columnStyle!=1}'></div>
                            </div>
                        </div>
                        <div class="clearBoth"></div>

                    </li>
                </ul>
            </div>
            <channel v-if="JSON.stringify(channelInfo)!=='{}'" :info="channelInfo"></channel>
            <remarknew v-if="usecomtype==2"
                       :topicid="specialInfo.specialDetail.topicid" :reportData="commentReportData" :onTop="onTop" :comtype="'commnet'"
                       @change3="getCounter" :isRealtime="isRealtime" :maxcount="2"></remarknew>
            <remarkold v-if="usecomtype==1" :params="paramValue" :reportData="commentReportData" :onTop="onTop"
                       @change2="getCounter"></remarkold>
            <btn text="去「扬帆App」参与讨论" cate="btn-light" :wakeup-param="callApp" :counter="remarkNum"></btn>
            <div class="edit-takeup" v-if="!onTop"></div>
        </div>
        <anchor v-show="showTopBtn"></anchor>
    </div>
</template>

<script>
    import qs from "querystring"
    import Wakeup from "../../assets/libs/func/callapp.js"

    export default {
        components: {
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve);
            },
            Banner: function (resolve) {
                require(["../../components/banner.vue"], resolve);
            },
            Listlive: function (resolve) {
                require(["../../components/list_live.vue"], resolve);
            },
            Listinfo: function (resolve) {
                require(["../../components/list_info.vue"], resolve);
            },
            Listalbum: function (resolve) {
                require(["../../components/list_album.vue"], resolve);
            },
            Listvideo: function (resolve) {
                require(["../../components/list_video.vue"], resolve);
            },
            Listspecial: function (resolve) {
                require(["../../components/list_special.vue"], resolve);
            },
            Listnote: function (resolve) {
                require(["../../components/list_note.vue"], resolve);
            },
            Listshow: function (resolve) {
                require(["../../components/list_show.vue"], resolve);
            },
            Listgoods: function (resolve) {
                require(["../../components/list_goods"], resolve);
            },
            Listlink: function (resolve) {
                require(["../../components/list_link.vue"], resolve);
            },
            Listaudio: function (resolve) {
                require(["../../components/list_audio.vue"], resolve);
            },
            Channel: function (resolve) {
                require(["../../components/channel.vue"], resolve);
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new.vue"], resolve);
            },
            Remarkold: function (resolve) {
                require(["../../components/remark_old.vue"], resolve);
            },
            Btn: function (resolve) {
                require(["../../components/btn.vue"], resolve);
            },
            Wakeup,
            Anchor: function (resolve) {
                require(["../../components/anchor.vue"], resolve);
            }
        },
        data: function () {
            return {
                usecomtype: 0,//评论使用新旧系统1:旧 2:新，
                remarkNum: 0,
                specialInfo: {},
                channelInfo: {},
                commentInfo: {},
//                theTopicId: "",
                commentReportData: {},
                paramValue: {
                    businessType: "special",
                    activityId: "",   // 177555
                    roleType: "0",
                    programId: this.$route.params.specialid,    // 40288db463fc10af0163fc1f6d3900ac
                    preChatId: "0"
                },
                layerDisplay: {
                    type: Boolean,
                    default: true
                },
                callApp: {
                    contentType: 5,
                    contentParam: this.$route.params.specialid
                },
                showTopBtn: false,
                onTop: true,
                isRealtime:false,
            }
        },
        mounted: function () {
            let that = this;
            // console.log(interbaseUrl);

            // 专题信息
            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getSpecialContentList",
                qs.stringify({
                    params: JSON.stringify({
                        specialId: this.$route.params.specialid,  // 40288db4621e39f80162276276620389
                        detailTag: 1
                    }),
                    apiVersion: process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {
                //404
                if (response.data.state == 2063){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;}
                that.specialInfo = response.data.data;
//                that.specialInfo.specialDetail.topicid = "5b9649cb8a3b951720186f27";    // 测试用数据
//                console.log("===================================");
             //   console.log(JSON.stringify(that.specialInfo, undefined, 2));
//                console.log("===================================");

                that.paramValue.activityId = that.specialInfo.specialDetail.channelId ? this.specialInfo.specialDetail.channelId : "";
                that.paramValue.contenturl = window.location.href;
                that.paramValue.contenttitle = that.specialInfo.specialDetail.shareTitle;

                // 修改页面信息
                let meta = {
                    title: this.specialInfo.specialDetail.shareTitle,
                    content: this.specialInfo.specialDetail.shareContent,
                    name: this.specialInfo.specialDetail.specialName
                };
                // console.log(meta);
                this.createMetaInfo(meta);
                this.freshTitles(this.specialInfo.specialDetail.shareTitle);
                if (this.specialInfo.specialDetail.channelId) {
                    this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                        qs.stringify({
                            "params": JSON.stringify({"channelId": that.specialInfo.specialDetail.channelId}),
                            "apiVersion": process.env.VUE_APP_SERVER_VER
                        })
                    ).then((response) => {
                        that.channelInfo = response.data.data;
                    });
                }

                // 评论参数数据
                this.commentReportData = {
                    uid: "",
                    username: "",
                    tagid: "",
                    contentid: this.$route.params.specialid,
                    imei: "",
                    openid: "",
                    ip: "",
                    name: that.specialInfo.specialDetail.specialName,
                    extendtag: "",
                    type: "special_1",
                    contenttype: "special",
                    opertime:  that.toFullTime(),
                    channelid: that.specialInfo.specialDetail.channelId ? that.specialInfo.specialDetail.channelId : "",
                };
                this.axios.get(
                    /*"https://yfhefei.butel.com:44335/setsail/external/externalService?service=getParameterList&params={'keys':'oldCommentLink'}"*/
                    interbaseUrl
                    + "setsail/external/externalService?service=getParameterList&params={'keys':'oldCommentLink'}")
                    .then((response) => {
                        let oldCommentLink = response.data.data.rows[0].value;
                        if (oldCommentLink == "true") {
                            that.usecomtype = 1;
                        } else if (oldCommentLink == "false" &&
                            (that.specialInfo.specialDetail.topicid == ""
                                || typeof(that.specialInfo.specialDetail.topicid) == "undefined"
                                || that.specialInfo.specialDetail.topicid == null)) {
                            that.usecomtype = 1;
                        }
                        if(oldCommentLink == "false" &&
                            !(that.specialInfo.specialDetail.topicid == "")
                                && !(typeof(that.specialInfo.specialDetail.topicid) == "undefined")
                                && !(that.specialInfo.specialDetail.topicid == null)){
                            that.usecomtype = 2;
                        }
                     //   alert("oldCommentLink:"+oldCommentLink+";usecomtype:"+that.usecomtype);
                    });
//                this.theTopicId = this.specialInfo.specialDetail.id;
                // console.log(JSON.stringify(that.specialInfo.specialDetail, undefined, 2));

                // 二次分享行为
                window.initShareConfig = initShareConf(
                    that.specialInfo.specialDetail.shareTitle,
                    that.specialInfo.specialDetail.shareContent,
                    that.specialInfo.specialDetail.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        opertime: that.toFullTime(),
                        imei: "",
                        openid: "",
                        ip: "",
                        channelid: that.specialInfo.specialDetail.channelId ? that.specialInfo.specialDetail.channelId : "",
                        contentid: that.$route.params.specialid,
                        name: that.specialInfo.name,
                        contenttype: "programme",
                        type: "programme_2",
                        tagid: "",
                        extendtag: "",
                        sharetype: "weixin",
                        shareurl: window.location.href
                    }
                );


                function doAccessAlbumSpecial() {
                    let actionType = "accessalbumspecial";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "contentid": that.$route.params.specialid,
                        "imei": "",
                        "openid": "",
                        "ip": "",
                        "type": "specail_1",
                        "contenttype": "specail",
                        "name": that.specialInfo.specialDetail.specialName,
                        "opertime": that.toFullTime(),
                        "channelid": that.specialInfo.specialDetail.channelId,
                        "sharetype": ""
                    };
                    shareUrlReport(behaviorData, actionType);
                }

                doAccessAlbumSpecial();

            });

            window.addEventListener('scroll', that.handleScroll)
        },

        methods: {
            custormAnchor(anchorName) {
                // 找到锚点
                let anchorElement = document.getElementById(anchorName);
                // 如果对应id的锚点存在，就跳转到锚点
                if (anchorElement) {
                    anchorElement.scrollIntoView();
                }
            },
            getState: function (bol) {
                this.layerDisplay = bol;
            },
            getCounter: function (val) {
                this.remarkNum = val;
            },
            handleScroll(e) {
                function getScrollTop() {
                    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                    return scrollTop;
                }

                this.showTopBtn = (getScrollTop() > 500);
            }

        }
    }
</script>

<style>
    #special_container {
    }

    .special-title {
        font-size: 1.2rem;
        line-height: 2.4rem;
        color: #444444;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .special-content {
        font-size: 0.9rem;
        line-height: 1.2rem;
        max-height: 3.6rem;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .special-tag-list {
        line-height: 0.9rem;
        font-size: 0.9rem;
        color: #444444;
        padding: 0;
        margin: 0.4rem auto;
    }

    .special-tag-item {
        float: left;
        padding: 8px 12px;
        background-color: #E1E1E1;
        margin: 0.3rem;
        border-radius: 0.3rem;
    }

    .special-art-list {
        padding: 0;
    }

    .special-art-item {
    }

    .special-art-item-title {
        background-color: #E1E1E1;
        color: #444444;
        font-size: 1.0rem;
        line-height: 2.2rem;
        text-indent: 0.4rem;
        margin: 0 -0.8rem;
    }

    .special-art-item-title-dot {
        color: #FF753F;
        font-weight: bold;
    }

    .special-content-container {
        display: block;
        width: 100%;
        margin: 0.3rem auto;
    }

    .special-content-container-small {
        display: block;
        width: 48%;
        margin: 0.3rem 1%;
        float: left;
    }

    .special-art-item-list-double {
        display: flex;
        flex-wrap: wrap;
    }

    .special-content-container-small div {
        border-bottom: 0 !important;
    }

    .banner-component-container {
        padding-bottom: 40% !important;
    }

    .special-content-container-small .list-video-component-img-btn {
        display: none;
    }
    .special-content-container-small .list-video-component-info-name span,
    .special-content-container-small .list-live-component-info span,
    .special-content-container-small .list-show-component-info-name span{
        display: none;
    }
</style>